<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-tabs
                v-model="activeName"
                type="card"
                @tab-click="tabHandleClick"
            >
                <el-tab-pane
                    label="就诊记录"
                    name="medicalRecords"
                >
                    <el-form
                        :model="baseInfo"
                        ref="form"
                        size="small"
                        :inline="true"
                        label-width="68px"
                    >
                        <el-form-item
                            label="专病名称"
                            prop="diseaseId"
                        >
                            <el-select
                                v-model="baseInfo.diseaseId"
                                placeholder="请选择专病名称"
                                style="width: 240px"
                                @change="getListClassify"
                            >
                                <el-option
                                    v-for="dict in dict.type.sys_manage_diseases"
                                    :key="dict.value"
                                    :label="dict.label"
                                    :value="dict.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            label="专病分类"
                            prop="diseaseClassifyId"
                        >
                            <el-select
                                v-model="baseInfo.diseaseClassifyId"
                                placeholder="请选择专病分类"
                                style="width: 240px"
                            >
                                <el-option
                                    v-for="item in classifyList"
                                    :key="item.diseaseClassifyId"
                                    :label="item.diseaseClassifyName"
                                    :value="item.diseaseClassifyId"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            label="专属医生"
                            prop="doctorId"
                        >
                            <el-select
                                v-model="baseInfo.doctorId"
                                placeholder="请选择专属医生"
                                style="width: 240px"
                            >
                                <el-option
                                    v-for="item in doctorList"
                                    :key="item.userId"
                                    :label="item.userName"
                                    :value="item.userId"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            label="诊断状态"
                            prop="status"
                        >
                            <el-select
                                v-model="baseInfo.status"
                                placeholder="请选择诊断状态"
                                style="width: 240px"
                            >
                                <el-option
                                    v-for="dict in dict.type.sys_diagnosis_status"
                                    :key="dict.value"
                                    :label="dict.label"
                                    :value="dict.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="初诊复诊">
                            <el-radio-group
                                v-model="baseInfo.visitStatus"
                                style="width: 240px"
                            >
                                <el-radio
                                    v-for="item in visitStatusList"
                                    :key="item.id"
                                    :label="item.name"
                                >{{item.name}}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item
                            label="初诊日期"
                            prop="firstVisitTime"
                        >
                            <el-date-picker
                                v-model="baseInfo.firstVisitTime"
                                type="datetime"
                                placeholder="选择日期时间"
                                style="width: 240px"
                            >
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item
                            label="复诊日期"
                            prop="againVisitTime"
                            v-show="baseInfo.visitStatus===2"
                        >
                            <el-date-picker
                                v-model="baseInfo.againVisitTime"
                                type="datetime"
                                placeholder="选择日期时间"
                                style="width: 240px"
                            >
                            </el-date-picker>
                        </el-form-item>

                    </el-form>
                </el-tab-pane>
                <el-tab-pane
                    label="照片"
                    name="pic"
                >
                    <el-row style="text-align:center;">已有照片<span style="color:red;">{{picData.total}}</span>组 最近拍照时间:{{picData.maxDate}}</el-row>
                    <el-form
                        :model="pictureForm"
                        ref="pictureForm"
                        size="small"
                        :inline="true"
                        label-width="68px"
                    >
                        <el-form-item label="照片类型">
                            <el-select
                                v-model="pictureForm.photoUploadType"
                                placeholder="请选择照片类型"
                                style="width: 240px"
                            >
                                <el-option
                                    v-for="dict in dict.type.photo_upload_type"
                                    :key="dict.value"
                                    :label="dict.label"
                                    :value="dict.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="光照类型">
                            <el-select
                                v-model="pictureForm.photoLightingType"
                                placeholder="请选择光照类型"
                                style="width: 240px"
                            >
                                <el-option
                                    v-for="dict in dict.type.photo_lighting_type"
                                    :key="dict.value"
                                    :label="dict.label"
                                    :value="dict.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <el-row
                        v-for="item in picData.rows"
                        :key="item.photoId"
                        style="margin-top:15px"
                    >
                        <el-col :span="4">
                            <el-radio
                                v-model="pictureForm.photoId"
                                :label="item.createTime"
                            >
                            </el-radio>
                        </el-col>
                        <el-col
                            :span="20"
                            style="display:flex;justify-content:space-between"
                        >

                            <el-image
                                style="width: 200px; height: 200px"
                                :src="baseUrl +item.leftPhotoAddress"
                                :preview-src-list="srcList"
                                @click="getPicPreviewList(item)"
                            >
                            </el-image>
                            <el-image
                                style="width: 200px; height: 200px"
                                :src="baseUrl +item.middlePhotoAddress"
                                :preview-src-list="srcList"
                                @click="getPicPreviewList(item)"
                            >
                            </el-image>
                            <el-image
                                style="width: 200px; height: 200px"
                                :src="baseUrl +item.rightPhotoAddress"
                                :preview-src-list="srcList"
                                @click="getPicPreviewList(item)"
                            >
                            </el-image>
                        </el-col>
                    </el-row>

                </el-tab-pane>
                <el-tab-pane
                    label="方案"
                    name="plan"
                >方案</el-tab-pane>
            </el-tabs>
        </el-row>
        <el-dialog
            title="新增录入"
            :visible.sync="patientInfoOpen"
            width="700px"
            append-to-body
        >
            <el-form
                :model="patientInfo"
                ref="patientForm"
                :rules="patientFormRules"
                size="small"
                :inline="true"
                label-width="78px"
            >
                <el-row>
                    <el-form-item
                        label="患者姓名"
                        prop="patientName"
                    >
                        <el-input
                            v-model="patientInfo.patientName"
                            placeholder="请输入患者姓名"
                            clearable
                            style="width: 240px"
                        />
                    </el-form-item>
                    <el-form-item
                        label="患者性别"
                        prop="sex"
                    >
                        <el-select
                            v-model="patientInfo.sex"
                            placeholder="请选择患者性别"
                            style="width: 240px"
                        >
                            <el-option
                                v-for="dict in dict.type.sys_user_sex"
                                :key="dict.value"
                                :label="dict.label"
                                :value="dict.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        label="患者年龄"
                        prop="age"
                    >
                        <el-input-number
                            v-model="patientInfo.age"
                            controls-position="right"
                            :min="0"
                            :max="150"
                            style="width: 240px"
                        >
                        </el-input-number>
                    </el-form-item>
                    <el-form-item
                        label="患者手机"
                        prop="patientPhone"
                    >
                        <el-input
                            v-model="patientInfo.patientPhone"
                            placeholder="请输入患者手机"
                            clearable
                            style="width: 240px"
                        />
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item
                        label="患者地址"
                        prop="area"
                    >
                        <el-cascader
                            v-model="patientInfo.area"
                            placeholder="请选择患者地址"
                            class="picker-form"
                            :options="areaList"
                            :props="{ children: 'childrenList', value: 'id', label: 'name' }"
                            style="width: 240px"
                        >
                        </el-cascader>
                    </el-form-item>
                    <el-form-item
                        label="详细地址"
                        prop="address"
                    >
                        <el-input
                            v-model="patientInfo.address"
                            placeholder="请输入详细地址"
                            clearable
                            style="width: 240px"
                        />
                    </el-form-item>
                </el-row>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    type="primary"
                    @click="submitPatientForm"
                >确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listUser } from "@/api/system/user";
import { listClassify } from "@/api/system/classify";
import {
    addressJson,
    listPictureLast,
    addPatient,
    listPatient,
    addVisit,
} from "@/api/patients/personal";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
    name: "personal",
    dicts: [
        "sys_user_sex",
        "sys_manage_diseases",
        "sys_diagnosis_status",
        "photo_upload_type",
        "photo_lighting_type",
    ],
    data() {
        return {
            baseUrl: process.env.VUE_APP_BASE_API,
            activeName: "medicalRecords",
            // 省市区
            areaList: [],
            patientFormRules: {
                patientName: [
                    {
                        required: true,
                        message: "患者姓名不能为空",
                        trigger: "blur",
                    },
                ],
                sex: [
                    {
                        required: true,
                        message: "患者性别不能为空",
                        trigger: "blur",
                    },
                ],
                age: [
                    {
                        required: true,
                        message: "患者年龄不能为空",
                        trigger: "blur",
                    },
                ],
                patientPhone: [
                    {
                        required: true,
                        message: "患者手机号不能为空",
                        trigger: "blur",
                    },
                ],
                area: [
                    {
                        required: true,
                        message: "患者地址不能为空",
                        trigger: "blur",
                    },
                ],
            },
            patientInfoOpen: false,
            patientInfo: {
                patientName: undefined,
                patientPhone: undefined,
                sex: undefined,
                age: 0,
                area: undefined,
                address: undefined,
            },
            baseInfo: {
                patientName: undefined,
                patientPhone: undefined,
                sex: undefined,
                age: 0,
                area: undefined,
                address: undefined,
                diseaseId: undefined,
                diseaseClassifyId: undefined,
            },
            //专病分类
            classifyList: [
                { diseaseClassifyId: null, diseaseClassifyName: null },
            ],
            doctorList: [],
            visitStatusList: [
                { id: 1, name: "初诊" },
                { id: 2, name: "复诊" },
            ],
            pictureForm: {},
            picData: {},
            srcList: [],
            saveStatus: false,
            medicalRecordsList: [
                {
                    visitId: 1,
                    patientName: "李四",
                    time: "2022-8-2",
                    diseaseName: "黄褐斑",
                    visitStatus: "初诊",
                    doctorName: "郝主任",
                },
                {
                    visitId: 2,
                    patientName: "李四",
                    time: "2022-8-3",
                    diseaseName: "黄褐斑",
                    visitStatus: "复诊",
                    doctorName: "郝主任",
                },
                {
                    visitId: 3,
                    patientName: "李四",
                    time: "2022-8-5",
                    diseaseName: "其他病",
                    visitStatus: "初诊",
                    doctorName: "郝主任",
                },
                {
                    visitId: 4,
                    patientName: "李四",
                    time: "2022-8-13",
                    diseaseName: "脸黄",
                    visitStatus: "初诊",
                    doctorName: "郝主任",
                },
                {
                    visitId: 5,
                    patientName: "李四",
                    time: "2022-8-22",
                    diseaseName: "雀斑",
                    visitStatus: "初诊",
                    doctorName: "郝主任",
                },
                {
                    visitId: 6,
                    patientName: "李四",
                    time: "2022-9-3",
                    diseaseName: "雀斑",
                    visitStatus: "复诊",
                    doctorName: "郝主任",
                },
                {
                    visitId: 7,
                    patientName: "李四",
                    time: "2022-12-5",
                    diseaseName: "不知道",
                    visitStatus: "初诊",
                    doctorName: "郝主任",
                },
                {
                    visitId: 8,
                    patientName: "李四",
                    time: "2022-12-13",
                    diseaseName: "不知道2",
                    visitStatus: "初诊",
                    doctorName: "郝主任",
                },
            ],
            step: 0,
        };
    },
    watch: {},
    created() {
        this.getAddressData();
        this.getDoctorData();
        this.getLastPictureList();
    },
    computed: {},
    methods: {
        tabHandleClick() {},
        next() {
            if (this.step === 0) {
                this.step = 1;
            } else if (this.step === 1) {
                this.step = 2;
            }
        },
        detail() {},
        cancel() {
            this.patientInfoOpen = false;
        },
        submitPatientForm() {
            this.$refs["patientForm"].validate((valid) => {
                if (valid) {
                    this.patientInfo.provinceId = this.patientInfo.area[0];
                    this.patientInfo.cityId = this.patientInfo.area[1];
                    this.patientInfo.countyId = this.patientInfo.area[2];
                    let mData = this.patientInfo;
                    addPatient(mData).then((res) => {
                        this.$modal.msgSuccess("新增成功");
                    });
                }
            });
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        getPicPreviewList(it) {
            this.srcList = [
                this.baseUrl + it.leftPhotoAddress,
                this.baseUrl + it.middlePhotoAddress,
                this.baseUrl + it.rightPhotoAddress,
            ];
        },
        getDoctorData() {
            listUser({ pageNum: 1, pageSize: 1000, roleId: 101 }).then(
                (res) => {
                    this.doctorList = res.rows;
                }
            );
        },
        getAddressData() {
            addressJson().then((res) => {
                this.areaList = res.data;
            });
        },
        getLastPictureList() {
            listPictureLast({ patientId: 114 }).then((res) => {
                this.picData = res.data;
            });
        },
        saveBaseInfo() {
            addVisit().then((res) => {});
        },

        getListClassify(value) {
            listClassify({
                pageNum: 1,
                pageSize: 1000,
                diseaseId: Number(value),
            }).then((response) => {
                this.classifyList = response.rows;
            });
        },
    },
};
</script>

<style scoped>
.medical-records {
    padding: 5px;
    cursor: pointer;
    border-bottom: 1px solid #000;
}
.medical-records:hover {
    background-color: #1890ff;
}
</style>